<template>
  <div>
    <loading ref="loading"></loading>
    <ul>
      <li v-for="todo in todos">
        <input type="checkbox" :checked="todo.done" @change="toggle(todo)">
        <span :class="{ done: todo.done }" @click="toggle(todo)">{{ todo.text }}</span>
        <nuxt-link :to="{path:'/todo/'+todo.text}">详情</nuxt-link>
        <nuxt-link class="todolink" :to="'/todo/'+todo.text">{{todo.text}}</nuxt-link>
      </li>
      <li>
        <input placeholder="What needs to be done?" @keyup.enter="addTodo">
      </li>
    </ul>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import Loading from '~/components/Loading.vue'

export default {
  components: { Loading },
  computed: {
    todos() {
      return this.$store.state.todos.list
    }
  },
  methods: {
    addTodo(e) {
      this.$store.commit('todos/add', e.target.value)
      e.target.value = ''

      
    },
    ...mapMutations({
      toggle: 'todos/toggle'
    })
  }
}
</script>

<style>
.done {
  text-decoration: line-through;
}
li {
  /* border: solid #333;
  border-width: 1px 0 0 0; */
  width: 200px;
}
.todolink {
  float: right;
}
</style>